<template>
  <div class="shopcar-container">
    <!-- 购买商品列表 -->
    <div class="goods-list" v-for="(item,index) in goodslist" :key="index">
      <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch v-model="$store.getters.getGoodsSelected[item.id]" @change="changeSelected(item.id,$store.getters.getGoodsSelected[item.id])"></mt-switch>
            <img :src="item.thumb_path" alt="">
            <div class="info">
              <h1>{{item.title}}</h1>
              <p>
                <span class="price">￥{{item.sell_price}}</span>
                <numbox :initCount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                <a href="#" @click.prevent="remove(item.id,index)">删除</a>
              </p>
            </div>

					</div>
				</div>
			</div>
    </div>

    <!-- 结算区域 -->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
            <div class="left">
              <p>总计 ( 不含运费 )</p>
              <p>已勾选商品件 
                <span class="red">{{$store.getters.getNumber.count}}</span>
                , 总价 
                <span class="red">￥{{$store.getters.getNumber.amount}}</span></p> 
            </div>
             <mt-button type="danger">去结算</mt-button>   
          </div>
        </div>    
    </div>        
  </div>
</template>


<script>
import numbox from '../subcomponents/shop_numbox'
export default {
  data(){
    return {
      goodslist: []  //购买的商品列表
    }
  },
  created(){
    this.getGoodsList()
  },
  methods:{
    //获取购买的商品信息列表
    getGoodsList(){
      //遍历store中car 获取购买商品的id  保存到一个数组中
      var arrId = []
      this.$store.state.car.forEach(item => {
        arrId.push(item.id)
      })
      //如果购物车中没有商品就不发送请求，不然会报错
      if(arrId.length <= 0){
        return 
      }
      this.$http.get('api/goods/getshopcarlist/' + arrId.join(',')).then(result => {
        if(result.body.status === 0){
          this.goodslist = result.body.message
          console.log(result.body.message)
        }
      })
    },
    //点击删除对应的列表
    remove(id,index){
      this.goodslist.splice(index,1)
      //把删除商品的id传到store中去
      this.$store.commit('removeCar',id)
    },
    changeSelected(id,val){
      // console.log(id+'---'+selected)
      this.$store.commit('updateSelected',{id,selected:val})
    }
    
  },
  components:{
    numbox
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.shopcar-container{

  .goods-list{
    .mui-card-content-inner{
      display: flex;
      align-items: center;
    }
    .mui-card-content-inner{
      padding: 10px;  
    }
    img {
      width: 60px;
      height: 60px;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h1 {
        font-size: 14px;
      }
      p{
        margin: 0;
        margin-top: 15px;
      }
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }

  .jiesuan{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      .red{
        color: red;
      }
    }
  }
}
.shopcar-container .info /deep/ .mui-numbox{
  height: 25px;
} 
</style>
